<!--
 * @Author: zk
 * @Date: 2021-01-19 17:25:18
 * @LastEditors: zk
 * @LastEditTime: 2021-01-20 10:58:52
 * @Description:
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    title="高级查询"
    :visible.sync="dialogVisible"
    width="95%"
    :before-close="beforeClose"
  >
    <searchMain
      ref="searchMain"
      size="mini"
      :label-width="labelWidth"
      :model="formData"
      :rules="searchRules"
      :item-list="formItemList"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="beforeClose">取 消</el-button>
      <el-button
        type="primary"
        @click="submitHandle"
      >高级搜索</el-button>
    </span>
  </el-dialog>
</template>

<script>
import searchMain from '@/components/CommonForm/index.vue'
import { dataProps, addressList, fileStatusType } from '@/simdata/healthData.js'
export default {
  components: {
    searchMain
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogConfig: {
      type: Object,
      default: () => ({
        title: '',
        dialogType: 'new'
      })
    }
  },
  data() {
    return {
      labelWidth: 'auto',
      // 查询表单
      formData: {
        keyword: '', // 个人信息项 字段
        keyValue: '', // 值
        ageStart: '', // 年龄开始
        ageEnd: '', // 年龄结束
        isCheck: '', // 是否体检
        disease: '', // 慢病人群分类
        examine: '', // 审核状态
        searchTime: '', // 时间查询项目
        yearData: '', // 年度
        createDate: '', // 建档日期 开始
        endDate: '' // 结束日期
      },
      // 验证
      searchRules: {
        isCheck: [
          { required: true, message: '请选择是否体检', trigger: 'change' }
        ],
        searchTime: [
          { required: true, message: '请选择时间查询项目', trigger: 'change' }
        ]
      },
      // 配置search label表单
      formItemList: [
        {
          type: 'myInformation',
          label: '个人信息查询项目',
          span: 16,
          options: [
            { label: '个人档案号', value: 1 },
            { label: '家庭档案号', value: 2 },
            { label: '姓名', value: 3 },
            { label: '身份证号', value: 4 }
          ],
          props: dataProps
        },
        {
          type: 'Cascader',
          label: '常用地址',
          prop: 'Address_value',
          width: '120px',
          span: 8,
          options: addressList,
          props: dataProps,
          change: () => this.handleChange(),
          placeholder: '请选择...'
        },
        {
          type: 'data',
          label: '建档日期',
          prop: 'createDate',
          width: '140px',
          span: 8,
          placeholder: '请选择...'
        },
        {
          type: 'data',
          label: '至',
          prop: 'endDate',
          width: '140px',
          span: 8,
          placeholder: '请选择...'
        },
        {
          type: 'Select',
          label: '档案状态',
          prop: 'fileStatus',
          width: '120px',
          span: 8,
          options: fileStatusType,
          props: dataProps,
          change: row => '',
          placeholder: '请选择...'
        }
      ]
    }
  },
  methods: {
    beforeClose() {
      this.closeDialog()
    },
    // 关闭弹框
    closeDialog() {
      this.$emit('update:dialogVisible', false)
    },
    // 确定提交
    submitHandle() {
      this.closeDialog()
    }

  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body {
  padding: 8px 20px;
}
</style>
